<template>
  <div class="table-data-view" v-loading='tableLoading'>
    <div class="common-screen-view">
      <div class="common-screen-cell">
        <!-- <div class="common-screen-title"  style="width:65px">名称：</div> -->
        <el-input v-model="condition" :placeholder="$t('tables_title.name')"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searceTenant">{{$t('global.search')}}</el-button>
      <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('tenant_info_add')" @click="addTenant">{{$t('global.add')}}</el-button>
      <el-button type="primary" icon="el-icon-folder-opened" @click="exportData">{{$t('global.export')}}</el-button>
    </div>
    <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @reviseTenant="reviseTenant" @delTenant="delTenant"></table-list>
    <table-pagination
      :total="count"
      :currentPage="pageNow"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
    </table-pagination>

    <el-dialog :title="$t('tenant_management.edit_tenant_info')" :close-on-click-modal="false" :visible.sync="tenantInfoVisible" width="600px">
      <add-edit-tenant :isEdit="isEdit" :editTenantInfo="editTenantInfo" @refreshData="refreshData" @cancelView="cancelView"></add-edit-tenant>
    </el-dialog>
  </div>
</template>

<script>

import { checkPermission } from '@/common/utils/permission.js'
import { getTenantList,deleteTenant } from '@/api/tenantApi.js'
import { exportToExcel } from '@/common/utils/util.js'

export default {
  data(){
    return{
      isEdit:false,
      tableLoading:false,
      tenantInfoVisible:false,
      positionInfoVisible:false,
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      total: 0,             //数据总数
      pageNow:1,        //当前页码
      condition:'',
      count:0,
      pageSize:10,      //每页查询数量
      editTenantInfo:{},
      tenantId:'',
      userInfo:{}
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    tablePagination: () => import("@/components/table_pagination.vue"),    //引入页码组件   为方便拓展 把它与table组件分开封装
    addEditTenant:()=>import("./add_edit_tenant.vue")
  },
  created(){
    this.userInfo = this.$storage.getItem('userInfo')
    this.tableConfig = {
      isCheckBox:true,
      props:[
        { type: "text", label: "tables_title.tenant_name", prop: "name"},
        { type: "text", label: "tables_title.tenant_code", prop: "code"},
        { type: "text", label: "tables_title.database_name", prop: "dbName"},
        { type: "text", label: "tables_title.create_time", prop: "createTime"},
        { type: "text", label: "tables_title.creater_name", prop: "createUser"},
        { type: "text", label: "tables_title.update_time", prop: "updateTime"},
        { type: "text", label: "tables_title.update_name", prop: "updateUser"},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseTenant',code:'tenant_info_edit'},
        {label:'global.delete',callback:'delTenant',code:'tenant_info_delete'}]
    }
    this.getTenantInfoList()
  },
  methods:{
    searceTenant(){
      this.pageNow = 1
      this.getTenantInfoList()
    },
    getTenantInfoList(){        //获取职位列表
      this.tableLoading = true
      getTenantList({
      condition:this.condition,
      page:this.pageNow,
      limit:this.pageSize
      }).then((res)=>{
        console.log(res)
        this.tableLoading = false
        if(res.status == 200){
          this.count = res.data.count
          this.tableData = res.data.data
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.tableLoading = false
      })
    },
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    handleSizeChange(val){      //修改每页的显示条数
      this.pageSize = val
      this.pageNow = 1
      this.getTenantInfoList()
    },
    handleCurrentChange(val){   //切换当前页码
      this.pageNow = val
      this.getTenantInfoList()
    },
    addTenant(){
      this.isEdit = false
      this.editTenantInfo = {
        adminUsername:this.userInfo.account,
        adminPassword:''
      }
      this.tenantInfoVisible = true
    },
    reviseTenant(row){
      this.isEdit = true
      row.adminUsername = this.userInfo.account
      row.adminPassword = ''
      this.editTenantInfo = row
      this.tenantInfoVisible = true
    },
    delTenant(row){           //删除租户
      this.$confirm('是否删除租户"' + row.name + '"?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let formData = new FormData()
        formData.append("tenantId",row.tenantId)
        deleteTenant(formData).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.pageNow = 1
            this.deptId = 0
            this.getTenantInfoList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    cancelView(){       //关闭编辑弹窗
      this.tenantInfoVisible = false
    },
    refreshData(){      //刷新表格数据
      this.tenantInfoVisible = false
      this.page = 1
      this.getTenantInfoList()
    },
    exportData(){
      let exportData = this.$refs.tableView.getCheckList()
      if(exportData.length == 0){
        this.$message({
          message: '请选择需要导出的数据',
          type: 'warning'
        });
        return
      }
      let columns = [
        {title:'租户名称',key:'name'},
        {title:'租户编码',key:'code'},
        {title:'关联数据库名称',key:'dbName'},
        {title:'创建时间',key:'createTime'},
        {title:'创建人',key:'createUser'},
        {title:'更新时间',key:'updateTime'},
        {title:'更新人',key:'updateUser'}
      ]
      exportToExcel(columns,exportData,'租户管理列表')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
